<template>
    <el-form :model="brandForm" label-width="100px" :rules="rules" ref="bForm" v-loading="loading">
        <el-form-item label="品牌名称" prop="name">
            <el-input v-model="brandForm.name" placeholder="请输入品牌名称"></el-input>
        </el-form-item>
        <el-form-item label="LOGO" prop="file">
            <el-upload 
                    action="#"
                    list-type="picture-card"
                    :auto-upload="false"
                    :limit="1"
                    :file-list="fileList"
                    style="width: 150px; height: 150px; overflow: hidden; margin-left: 7.5%;"
                    :on-change="changeFile"
                    :on-remove="removeFile">
                    <i class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="品牌说明" prop="description">
            <vue-editor 
                v-model="brandForm.description" 
                placeholder="请输入品牌说明"
                :editorToolbar="customToolbar"
                style="width: 85%; margin: 0 auto;"></vue-editor>
        </el-form-item>
        <el-form-item>
            <el-button type="success" @click="save()" style="margin-right: 10%;">保存</el-button>
            <el-button type="danger" @click="() => {
                this.$message({message: '取消成功', type: 'info'})
                this.$emit('update:show', false)
                this.$emit('getTableData')
                }">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import { get, post } from '@/plugins/axios.js'
    import { url } from './api.js'
    import store from '@/store/index.js'
    export default {
        name: 'UserEdit',
        props: ['id'],
        created() {
            if(this.id != null) {
                this.brandForm.id = this.id
                this.getById()
            }
        },
        data() {
            return {
                customToolbar: [
                    ['bold', 'underline', 'strike'],
                    ['code-block'], 
                    [
                        {list: 'ordered'}, 
                        {list: 'bullet'}
                    ], 
                    [
                        {indent: '-1'},
                        {indent: '+1'}
                    ],
                    [
                        {color: []}, 
                        {background: []}
                    ],
                    ['link', 'image']
                ],
                fileList: [],
                brandForm: {
                    name: "",
                    description: "",
                    logo: ""
                },
                rules: {
                    name: [
                        {
                            required: true,
                            message: '请输入品牌名称',
                            trigger: 'blur',    
                        },
                        {
                            max: 20,
                            message: '用户最多输入20个字符',
                            trigger: 'blur',    
                        }, 
                    ],
                    description: [
                        { 
                            required: true,
                            message: '请输入品牌详情',
                            trigger: 'blur',
                        },
                    ]
                }
            }
        },
        computed: {
            loading () {
                return store.getters.GET_LOADING
            }
        },
        methods: {
            save() {
                this.$refs.bForm.validate(valid => {
                    if (valid) {
                        post(this.id === null ? url.add : url.update, this.brandForm, content => {
                            this.$emit('update:show', false)
                            this.$emit('getBrandData')
                        })
                    }
                })
            },
            getById() {
                get(url.getById, {id: this.id}, content => {
                    for (const key in this.brandForm) {
                        if(Object.hasOwnProperty.call(content, key)) {
                            this.brandForm[key] = content[key]
                        }
                    }

                    this.fileList.push({
                        name: content.logo,
                        url: this.imgPath(content.logo)
                    })
                })
            },
            changeFile (file) {
                this.brandForm.file = file.raw
            },
            removeFile () {
                this.brandForm.file = null
            }
        }
    }
</script>

<style scoped lang="less">
    .el-input {
        width: 85%;
    }
    /deep/ .el-form-item__content {
        text-align: center;
    }
    .el-radio-group {
        position: relative;
        left: -5%;
    }
    .el-button {
        position: relative;
        left: -9%;
    }
</style>